<template>
  <div>

    <PreviewDialog ref="preview"
                   :calculatorSore="calculatorSore"
                   :describeContent="describeContent"
                   :fields="fields"
                   :medicalCalculatorData="medicalCalculatorData"
                   :type="cntFormulaType"/>

    <el-dialog id="similarTaskItemTableDialog" :visible.sync="visible" title="选择相似子任务" width="800px"
               append-to-body @close="closeDialog">
      <el-table highlight-current-row :data="containsSimilarTaskItemList" :max-height="300"
                border stripe>
        <el-table-column prop="name" :show-overflow-tooltip="true"
                         label="当前子任务名称"
                         min-width="100">
          <template slot-scope="scope">
            <span v-html="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column prop="similarTaskItemList"
                         label="已有子任务"
                         min-width="400">
          <template slot-scope="scope">
            <div v-for="similarTaskItem in scope.row.similarTaskItemList">
              <span v-html="similarTaskItem.name"></span>
              <span>({{ getStatusName(similarTaskItem) }})</span>
              <el-link type="primary" v-if="similarTaskItem.knowledgeId"
                       @click.prevent="showKnowledgeDetail(similarTaskItem)">详情
              </el-link>
              <el-link type="primary" v-if="similarTaskItem.status === 8"
                       @click.prevent="update(scope.row, similarTaskItem)">修订
              </el-link>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作"
                         width="100">
          <template slot-scope="scope">
            <span><el-link type="danger" @click.prevent="create(scope.row)">新增</el-link></span>
            <span><el-link @click.prevent="quit(scope.row)">取消</el-link></span>
          </template>
        </el-table-column>
      </el-table>
      <span class="dialog-footer" slot="footer" v-if="containsSimilarTaskItemList.length > 1">
        <el-button @click="quitAll">全部取消</el-button>
        <el-button @click="createAll" type="primary">全部新增</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import PreviewDialog from "../calculator/exportModel/PreviewDialog";
export default {
  name: "SimilarTaskItemTableDialog",
  components: {
    PreviewDialog
  },
  props: ['knowledgeLibId', 'containsSimilarTaskItemList'],
  data() {
    return {
      knowledgeId: '',
      knowledgeStatus: '',
      visible: false,
      previewDialogVisible: false,
      medicalCalculatorData: [],
      calculatorSore: [],
      describeContent: '',
      fields: [],
      cntFormulaType: 1,
    }
  },
  methods: {
    showKnowledgeDetail(similarTaskItem){
      this.knowledgeId = similarTaskItem.knowledgeId
      this.knowledgeStatus = similarTaskItem.status == 8 ? 'published' : 'unpublished'
      if (this.knowledgeLibId == CONST.KNOWLEDGE_LIB.CALCULATOR_LIB_ID) {
        let url = ''
        if (this.knowledgeStatus == 'unpublished') {
          url = '/pmph/action/medicalCalculator/selectDataById'
        } else {
          url = '/pmph/action/medicalCalculator/selectReleasedCalculatorById'
        }
        let that = this
        this.axios.get(url, {
          params: {
            id: similarTaskItem.knowledgeId,
          }
        }).then((response) => {
          that.medicalCalculatorData = response.data.medicalCalculatorData
          that.calculatorSore = response.data.calculatorSore
          that.describeContent = response.data.describeContent
          if (!this.describeContent) {
            this.describeContent = '无'
          }
          that.fields = response.data.fields
          that.cntFormulaType = response.data.type
          this.previewDialogVisible = true
        })
      }
      else if(this.knowledgeLibId == CONST.KNOWLEDGE_LIB.FLOW_CHART_LIB_ID){
        let routeUrl = this.$router.resolve({
          path: "/flowchart/mobileViewFlowChart",
          query: {id: similarTaskItem.knowledgeId},
        });
        window.open(routeUrl.href, "_blank");
      }
      else {
        this.$store.commit('setKnowledgeDetailId', this.knowledgeId)
        this.$store.commit('setKnowledgeDetailStatus', this.knowledgeStatus)
        this.$store.commit('showKnowledgeDetail')
      }
    },
    quitAll() {
      while (this.containsSimilarTaskItemList.length > 0) {
        this.$emit('quit', this.containsSimilarTaskItemList[0])
      }
    },
    createAll() {
      while (this.containsSimilarTaskItemList.length > 0) {
        this.$emit('create', this.containsSimilarTaskItemList[0])
      }
    },
    quit(taskItemWithSimilarList) {
      this.$emit('quit', taskItemWithSimilarList)
    },
    create(taskItemWithSimilarList) {
      this.$emit('create', taskItemWithSimilarList)
    },
    update(taskItemWithSimilarList, similarTaskItem) {
      this.$emit('update', taskItemWithSimilarList, similarTaskItem)
    },
    getStatusName(obj) {
      return (CONST.TASK_ITEM_STATUS.find(item => item.value === obj.status) || {}).key
    },
    closeDialog() {
      this.visible = false
      this.$emit('close')
    }
  },
  watch: {
    containsSimilarTaskItemList(val) {
      if (val.length === 0) {
        this.visible = false
      }
    }
  },
}
</script>

<style scoped>
#similarTaskItemTableDialog >>> .el-dialog__body {
  padding-top: 0px;
}
</style>
